iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
1
Modern Web

Angular - 從零開始系列 第 7

Angular - 從零開始 - Day7 -Router 路由基礎認識

  • 分享至 

  • xImage
  •  

angular

SPA - Single Page Application 單頁應用程式網頁,就是透過 Router 技術達成的,最經典的例子就是 Gmail

設定 Router

在 Angular 10 的 CLI 創建中一開始已經可以選擇是否建立 router 模組,所以建置好後會得到一個 app-routing.module.ts 檔案。

打開會看到預設建置完成的樣子。

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

const routes: Routes = []; // 主要寫其他路由的地方

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Angular 路由在取得 URL 後五個核心動作

  1. 套用轉址設定。(Applying Redirect)
  2. 從 URL 識別路由狀態。(Recognizing States)
  3. 從路由狀態解析出路由資訊。(Running Guards & Resolving Data)
  4. 依據路由資訊產生元件實體。(Activating Components)
  5. 套用導覽動作,從目前狀態移轉至下一個狀態。(Navigation)

建立路由與存放標籤

透過指令 ng g c homeng g c second,建立成功後要設定路徑,

<h1>Angular Router</h1>
<hr />

<ul>
  <li><a [routerLink]="['/home']">home</a></li>
  <li><a [routerLink]="[ '/second']">second</a></li>
</ul>

<router-outlet></router-outlet>

設定兩個連結,並且指向指定頁面,最後要加上 <router-outlet> 來存放路由,到此已經把基本路由的方式寫完了,接著要把路由建立起來。

要將路由設定寫在這個陣列中,並用物件呈現。

const routes: Routes = [];

建立路由

在建立 component 的過程中, Angular 已經自動將新增的兩個元件加入到 app.module.ts 的元件中,所以就不需做任何的設定,只要專心設定路由就可以了。

路由設定有兩組基本的屬性與值,一個是 path 路徑,另一個是要連結的元件。

const routes: Routes = [
  {
    path: "home",
    component: HomeComponent,
  },
  {
    path: "second",
    component: SecondComponent,
  },
];

完整路由程式碼

// 官方元件
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

// 自動新增自訂元件
import { HomeComponent } from "./home/home.component";
import { SecondComponent } from "./second/second.component";

const routes: Routes = [
  {
    path: "home",
    component: HomeComponent,
  },
  {
    path: "second",
    component: SecondComponent,
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

路由其他進階設定

const routes: Routes = [
  {
    path: "",
    redirectTo: "/home",
    pathMatch: "full", // 當路徑是空的時候轉址到 home
  },
  {
    path: "home",
    component: HomeComponent,
  },
  {
    path: "second",
    component: SecondComponent,
  },
  {
    path: "**",
    component: HomeComponent, // 萬用路徑,路由沒有比對到,永遠會執行
  },
];

設定子路由 Child Routing

這是路由比較進階的作法,就是在原本的路由下再建立更多的路由;也就是有些頁面下還會有其他子頁面。

設定指令如下:

  1. 建立 HOME 元件下的 home1 頁面。
ng g c home/home1

2.建立 HOME 元件下的 home1 頁面。

ng g c home/home2

輸入後就會在 home 資料夾中增加兩個子資料夾,分別為 home1,home2,裡面的元件也都會自動建立好。

接著在 home.component.html 中建立下方路由程式碼,因為 home1 跟 home2 是相依在 home 的下方,建立完路由後一樣要給予 <router-outlet> 這個標籤做接口。

<p>home works!</p>
<hr />

<ul>
  <li><a [routerLink]="['/home/home1']">Home1</a></li>
  <li><a [routerLink]="['/home/home2']">Home2</a></li>
</ul>

<router-outlet></router-outlet>

完成後來看到 home.component.ts,我在 home1 建立了路由後,要在這邊加上子路由的設定,寫法跟路由很相似。

下方可以看到在 HomeComponent 後面直接加上一個 children 的陣列,裡面包著物件,這跟原本的路由設定概念相同,很重要的地方是子路由第一個 path 一定要寫,並給予空值,代表不管怎麼樣一定都會跑這行,不然後面的子路由會讀不到。

 {
    path: 'home',
    component: HomeComponent,
    children: [
      {
        path: '', // 一定要加這行
      },
      {
        path: 'home1',
        component: Home1Component,
      },
      {
        path: 'home2',
        component: Home2Component,
      },
    ],
  },

這樣在點擊 home,就會出現 home1 跟 home2,並且顯示其內容。

完整路由寫法:

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    children: [
      {
        path: 'home1',
        component: Home1Component,
      },
      {
        path: 'home2',
        component: Home2Component,
      },
    ],
  },
  {
    path: 'second',
    component: SecondComponent,
  },
  {
    path: '**',
    redirectTo: 'home',
    pathMatch: 'full',
  },
];

參考資料


上一篇
Angular - 從零開始 - Day6 -雙向繫結 Two-way Binding
下一篇
Angular - 從零開始 - Day8 -Service 服務元件的基本認識
系列文
Angular - 從零開始25
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言